<template>
  <Popover placement="right" :content="isDisqusAnonymous ? 'G' : 'D'">
    <Badge :count="count" :title="title" :color="color">
      <Avatar shape="square" :size="props.size" :src="autoCommentAvatar(props.comment!)" />
    </Badge>
  </Popover>
</template>

<script setup lang="ts">
import { Popover, Badge, Avatar } from 'ant-design-vue'
import { avatarProps } from 'ant-design-vue/lib/avatar'
import { Comment } from '@/constants/comment'
import { autoCommentAvatar } from '@/transformers/avatar'
import { PropType } from 'vue'
const props = defineProps({
  comment: Object as PropType<Comment>,
  size: avatarProps()['size'],
})

const isDisqusAnonymous = true
const color = isDisqusAnonymous ? '#90c53f' : '#2e9fff'
const title = isDisqusAnonymous ? 'Guest user' : 'Disqus user'
const count = props.comment?.extends?.length ? 'G' : 'D'
</script>

<style lang="less" scoped></style>
